<template>
  <div class="public_main">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>{{$t('teleMarketing.no1')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('teleMarketing.no3')}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- -------------搜索查询栏------------------------ -->
    <search 
        :searchData="searchData" 
        @search="search" 
        :searchRight="true"
        :outputRight="false"
    ></search>
    <!-- -------------表单显示栏------------------------ -->
    <div class="table">
      <template>
        <el-table :data="tableData" size="small" v-loading="loadFlag" stripe>
          <el-table-column align="center" prop="phone" :label="$t('public.userTel')">
          </el-table-column>
          <el-table-column align="center" prop="name" :label="$t('public.name')">
          </el-table-column>
          <el-table-column align="center" prop="idCard" :label="$t('public.no2')">
          </el-table-column>
          <el-table-column align="center" prop="adminUpdateTime" :label="$t('teleMarketing.no48')">
          </el-table-column>
          <el-table-column align="center" prop="adminName" :label="$t('teleMarketing.no7')">
          </el-table-column>
          <el-table-column align="center" prop="followUpStatus" :label="$t('teleMarketing.no9')">
            <template slot-scope="scope">
              <span>{{$t($store.getters.isNo_status(scope.row.followUpStatus))}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="finalFollowupTime" :label="$t('teleMarketing.no59')">
          </el-table-column>
          <el-table-column align="center" prop="unfollowupDay" :label="$t('teleMarketing.no50')">
          </el-table-column>
          <el-table-column align="center" prop="phoneResult" :label="$t('auditDetail.no43')" >
            <template slot-scope="scope">
              <span>{{$t($store.getters.tel_through(scope.row.phoneResult))}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="isBorrow" :label="$t('teleMarketing.no14')">
            <template slot-scope="scope">
              <span>{{$t($store.getters.loanIntention_status(scope.row.isBorrow))}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="applyTime" :label="$t('public.CreateDate')">
          </el-table-column>
          <el-table-column align="center" prop="loanTime" :label="$t('teleMarketing.no11')">
          </el-table-column>
          <el-table-column align="center" prop="orderSuccessCount" :label="$t('teleMarketing.no49')">
          </el-table-column>
          <el-table-column fixed="right" align="center" prop="operation" :label="$t('public.operation')" min-width="120">
            <template slot-scope="scope">
              <span 
                v-if="$store.state.common.permiss.mymarketing.includes('add')"
                class="table_opr" 
                @click="showAdd(scope.row.id,scope.row.name,scope.row.phone)"
              >
              {{$t('teleMarketing.no21')}}
              </span>
              <span
                v-if="$store.state.common.permiss.mymarketing.includes('detail')"
                class="table_opr" 
                @click="selectDetail(scope.row.id,scope.row.name,scope.row.phone)"
              >
              {{$t('public.no29')}}
              </span>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="end">
          <div class="pages" >
              <el-pagination
              @current-change="handleCurrentChange"
              :current-page="pagination.current"
              layout="sizes, prev, pager, next, total,->"
              :page-sizes="pagination.pageSizeOptions"
              :page-size="pagination.pageSize"
              @size-change="handleSizeChange"
              :total="pagination.total">
              </el-pagination>
          </div>
        </el-row>
      </template>
    </div>

    <div class="foot"></div>

    <!-- ------------------ 查看详情弹窗开始 -------------------- -->
    <el-dialog :title="$t('public.no29')" :visible.sync="detailFlag" width="1100px">
      <p class="form-p mt-10">
        <span class="form-span2">{{$t('public.name')}}:</span>
        <span class="mr20">{{detailData.name}}</span>
        <span class="form-span2">{{$t('public.userTel')}}:</span>
        <span class="mr20">{{detailData.phone}}</span>
      </p>
      <el-table :data="tableData2" size="small" style="min-height:240px">
        <el-table-column align="center" prop="createTime" :label="$t('public.no21')">
        </el-table-column>
        <el-table-column align="center" prop="adminName" :label="$t('teleMarketing.no7')">
        </el-table-column>
        <el-table-column align="center" prop="callResult" :label="$t('auditDetail.no43')" >
          <template slot-scope="scope">
              <span>{{$t($store.getters.tel_through(scope.row.callResult))}}</span>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="isSendMessage" :label="$t('operationDetail.no25')" >
          <template slot-scope="scope">
              <span>{{$t($store.getters.isNo_status(scope.row.isSendMessage))}}</span>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="isBorrow" :label="$t('teleMarketing.no14')" >
          <template slot-scope="scope">
              <span>{{$t($store.getters.loanIntention_status(scope.row.isBorrow))}}</span>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="remark" :label="$t('public.no37')" >
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end">
        <el-pagination
          @current-change="handleCurrentChange2"
          :current-page="currentPage2"
          layout="prev, pager, next, ->"
          :total="pageTotal2?pageTotal2:0">
        </el-pagination>
      </el-row>
    </el-dialog>
    <!-- ------------------ 查看详情弹窗结束 -------------------- -->

    <!-- 添加营销数据 -->
    <el-dialog :title="$t('teleMarketing.no71')" :visible.sync="addFlag" width="850px">
      <div class="left2right">
        <div class="left">{{$t('public.name')}}</div>
        <div class="right">{{addRecord.name}}</div>
      </div>
      <div class="left2right">
        <div class="left">{{$t('public.userTel')}}</div>
        <div class="right">{{addRecord.phone}}</div>
      </div>
      <el-form :model="addRecord" size="small" ref="ruleForm" label-width="130px" :rules="rule">
        <el-form-item :label="$t('auditDetail.no43')" prop="callResult">
          <el-select size="small" v-model="addRecord.callResult" :placeholder="$t('public.placeholder')">
            <el-option v-for="item in options5" :key="item.value" :label="$t(item.label)" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('operationDetail.no25')" prop="isSendMessage">
          <el-radio-group v-model="addRecord.isSendMessage">
            <el-radio :label="1">{{$t('auditDetail.isAdressBook.no1')}}</el-radio>
            <el-radio :label="2">{{$t('auditDetail.isAdressBook.no2')}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('teleMarketing.no14')" prop="isBorrow">
          <el-radio-group v-model="addRecord.isBorrow">
            <el-radio :label="1">{{$t('teleMarketing.no19')}}</el-radio>
            <el-radio :label="2">{{$t('teleMarketing.no20')}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('public.no37')">
          <el-input type="textarea" v-model="addRecord.remark" :rows="4" :placeholder="$t('loanMoney.placeholder')+'~'"></el-input>
        </el-form-item>
        <el-form-item >
          <el-button type="primary" @click="addRecordSubmit('ruleForm')">{{$t('public.no47')}}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>
<script>
import { setTimeout } from 'timers';
import telemarketMem from 'src/mixins/telemarketMem.js';//获取电销员下拉
export default {
  name: 'MyMarketing',
  mixins:[telemarketMem],
  data () {
    const searchData=[
      {
        type: 'input',
        label: 'public.userTel',
        attr: 'phone',
        value: ''
      },
      {
        type: 'input',
        label: 'public.name',
        attr: 'name',
        value: ''
      },
      {
        type: 'input',
        label: 'public.no2',
        attr: 'idCard',
        value: ''
      },
      {
        type: 'rangePicker',
        label: 'teleMarketing.no48',
        attr: 'orderTime',
        value: [],
      },
      {
        type: 'select',
        attr: 'isFollow',
        label: 'teleMarketing.no9',
        option: this.$store.state.options.isOverdue_option, // 订单状态下拉选框信息
        value: '',
        langFlag: true,
      },
      {
        type: 'select',
        attr: 'adminId',
        label: 'teleMarketing.no7',
        option: [],
        value: '',
        langFlag: false,
      },
      {
        type: 'select',
        attr: 'phoneResult',
        label: 'auditDetail.no43',
        option: this.$store.state.options.telResult_select, 
        value: '',
        langFlag: true,
      },
      {
        type: 'select',
        attr: 'isBorrow',
        label: 'teleMarketing.no14',
        option: this.$store.state.options.loanIntention_status, 
        value: '',
        langFlag: true,
      },
      {
        type: 'rangePicker',
        label: 'teleMarketing.no10',
        attr: 'followupTime',
        value: [],
      },
      {
        type: 'doubleInput',
        label: 'teleMarketing.no49',
        attr: ['loanCountMin','loanCountMax'],
        value: [],
      },
      {
        type: 'doubleInput',
        label: 'teleMarketing.no50',
        attr: ['unfollowupDayMim','unfollowupDayMax'],
        value: [],
      }
    ]
    return {
      flag: true,
      loadFlag: true,
       pagination: {
        pageSize: global.config.pageSize,
        pageSizeOptions: global.config.pageSizeOptions,
        current: 1,
        total: 0,
      },
      searchData:searchData,
      formInline: { // 用户查询信息数据对应字段
        type:'2',
        idCard: '',
        name: '',
        phone: '',
        orderTimeBegin:'',
        orderTimeEnd:'',
        adminId:'',
        isFollow:'',
        phoneResult:'',
        isBorrow:'',
        followupTimeBegin:'',
        followupTimeEnd:'',
        loanCountMin:'',
        loanCountMax:'',
        unfollowupDayMim:'',
        unfollowupDayMax:''
      },
      currentPage2: 1, // 当前页下标
      pageTotal2: 0, // 分页总数
      options1: [], // 渠道来源
      options2: this.$store.state.options.isOverdue_option, // 是否更进,是否发送优惠券
      options3: [], // 电销员
      tableData: [],// 表格数据
      tableData2: [],// 弹窗表格数据
      options4: [], // 在职客服员列表
      options5: this.$store.state.options.telResult_select, // 通话结果
      options6: this.$store.state.options.ishang_option, // 是否
      telresultOptions: this.$store.state.options.telResult_select, // 通话结果
      loanOptions: this.$store.state.options.loanIntention_status, // 借款意向
      addFlag: false,
      detailFlag: false,
      detailData: {
        name: '',
        phone: '',
      },
      addRecord: {
        callResult: '',
        isSendMessage: 1,
        isBorrow: 1,
        remark: '',
        marketId:'',
        phone:'',
        name:''
      },
      rule: { 
        callResult: [
          { required: true, message:this.$t('public.placeholder'), trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    handleSizeChange (val) {// 每页条数变化时操作
      this.pagination.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange (val) { // 分页按钮操作
      this.pagination.current = val;
      this.getTableData();
    },
    search(search) { // 搜索
        this.formInline=search;
        this.formInline.orderTimeBegin=search.orderTime?search.orderTime[0]:'';
        this.formInline.orderTimeEnd=search.orderTime?search.orderTime[1]:'';
        this.formInline.followupTimeBegin=search.followupTime?search.followupTime[0]:'';
        this.formInline.followupTimeEnd=search.followupTime?search.followupTime[1]:'';
        if (this.flag) {
          this.flag = false;
          this.pagination.current = 1;
          this.getTableData();
        }
    },
    selectDetail (id, name, phone) { // 查看详情操作
      this.detailData.name = name;
      this.detailData.phone = phone;
      this.getDetailTable(id);
    },
    getDetailTable(id){
      let option = {
        pageNum:this.currentPage2,
        pageSize:'10',
        param:{
          marketId:id
        }
      };
      this.$axios.post(this.$action.telemarket_listLog, option).then(res => {
        if (res.code == 200) {
          this.tableData2 = res.data.list;
          this.pageTotal2 = res.data.total;
          this.detailFlag = true;
        }else{
          this.$globalMsg.error(res.message)
        }
      })
    },
    getTableData () { // 获取列表数据
      this.loadFlag = true;
      let option = {
        pageNum:this.pagination.current,
        pageSize:this.pagination.pageSize,
        param: {
          type:2,
          ...this.formInline
        }       
      }
      this.$axios.post(this.$action.telemarket_list, option).then(res => {
        this.flag = true;
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.pagination.total = res.data.total;
        }else{
          this.$globalMsg.error(res.message)
        }
        this.loadFlag = false;
      })
    },
    handleCurrentChange2 (val) { // 查看弹窗表格分页
      this.currentPage2 = val;
      this.getDetailTable()
    },
    showAdd(id, name, phone){
      this.addRecord.marketId = id;
      this.addRecord.name = name;
      this.addRecord.phone = phone;
      this.addFlag = true;
    },
    addRecordSubmit(formName){
      let option = {
        param: {
          ...this.addRecord
        }
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post(this.$action.telemarket_logAdd, option).then(res => {
            if (res.code == 200) {
              this.$globalMsg.success(this.$t('message.success'))
              this.getTableData();
            } else {
              this.$globalMsg.error(this.$t('idManage.err'))
            }
          })
          this.addClose()
        }
      })
    },
    addClose(){
      this.addFlag = false;
      this.$refs['ruleForm'].resetFields();
    }
  },
  watch: {
    addFlag(val){
      if(!val){
        this.addClose()
      }
    }
  },
  mounted () {
    this.telemarketMem().then(arr=>{// 获取在职电销员
      this.adminOptions=arr;
      this.searchData[5].option=arr;
    })
    this.getTableData();
  }
}
</script>

<style scoped lang="scss">
  .mr20{
    margin-right: 20px;
  }
  .mb5{
    margin-bottom: 6px;
  }
  .mt-10{
    margin-top: -20px;
    margin-bottom: 6px;
  }
  .el-radio{
    margin-top: 8px;
  }
</style>
